<!--
 * @Author: 王鹏 2911783749@qq.com
 * @Date: 2022-11-08 14:40:30
 * @LastEditors: 王鹏 2911783749@qq.com
 * @LastEditTime: 2022-11-08 21:27:46
 * @FilePath: \vue3Mixiu\code\src\views\Profiles.vue
 * @Description: 资金流水页
-->
<template>
  <div class="profiles">
    <!-- 筛选/添加按钮部分 -->
    <el-row>
      <el-col :span="12" class="query">
        投标时间筛选:
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择开始时间"
        />
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="选择结束时间"
        />
        <el-button type="primary">筛选</el-button>
      </el-col>
      <el-col :span="12" class="add">
        <el-button type="primary">添加</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <el-table
      :data="tableData"
      :default-sort="{ prop: 'date', order: 'descending' }"
      width="100%"
    >
      <el-table-column
        align="center"
        label="序号"
        type="index"
        width="80"
      >
      </el-table-column>
      <el-table-column prop="date" label="Date" align="center" sortable/>
      <el-table-column prop="type" label="收支类型"  align="center"/>
      <el-table-column prop="describe" label="收支描述"  align="center"/>
      <el-table-column label="收入"  align="center">
        <template #default="scope">
          <span style="color:#7ED583;">{{scope.row.income}}</span>
        </template>
      </el-table-column>
      <el-table-column label="支出" align="center">
        <template #default="scope">
          <span style="color:#E57C78;">{{scope.row.expend}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="expend" label="现金" align="center"/>
      <el-table-column prop="remark" label="备注" align="center"/>
      <el-table-column
        align="center"
        label="操作" >
        <template #default='scope'>
          <el-button type="warning">编辑</el-button>
            <el-button type="danger" @click="delOne(scope.$index, scope.row)">删除</el-button>
        </template>
            
      </el-table-column>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { onMounted, ref,reactive } from "vue";
// 引入列表数据接口
import {profilesList,del_profiles} from '../untils/api'
import {listType} from '../untils/type'

const value1 = ref("");
const value2 = ref("");
const tableData = ref([])
const  getProfilesList= async()=>{
    const {data} = await profilesList()
    console.log(data);
    tableData.value=data
}
onMounted(()=>{
    getProfilesList()
})
const delOne= async (index,value)=>{
  let {data} = await del_profiles(value)
  console.log(data);
  if(data.msg=='delete success'){
    ElMessage.success('删除成功')
  }
  getProfilesList()
}
</script>
<style scoped>
.profiles {
  padding: 20px;
}
.add {
  text-align: right;
}
</style>